<template>
  <div class="h-full">
    <el-row :gutter="10">
      <el-col :span="18" :offset="3">
        <div class="h-full w-full">
          <div class="workspace-logo rounded-lg px-10 flex items-center text-3xl"
               style="height:160px; width:100%;">
            应用管理中心
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-5">
      <el-col :span="18" :offset="3" class="text-left">
        <div class="font-bold space-x-4 flex">
          <div class="text-left">我的应用</div>
          <div class="flex-1"></div>
          <div class="text-right">
            <el-button class="" type="primary">创建应用</el-button>
          </div>
        </div>
        <div class="h-full w-full mt-2">
          <el-space v-if="applicationList.length" wrap alignment="flex-start" class="" style="">
            <div v-for="e in applicationList"
                 :key="e.id"
                 class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer relative application"
                 style="height: 60px; width: 180px; "
                 @click="routeTo(e)">
              <svg class="icon h-10 w-10" style="" aria-hidden="true">
                <use :href="'#'+e.logo"></use>
              </svg>
              <div class="ml-2 ">{{ e.name }}</div>
              <el-dropdown placement="bottom" class="app-dropdown absolute right-4" @command="onCommand()">
                <el-icon class="icon text-xl">
                  <Setting/>
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="edit">编辑应用</el-dropdown-item>
                    <el-dropdown-item command="authority">分配权限</el-dropdown-item>
                    <el-dropdown-item command="remove">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-space>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive} from 'vue'
import {useRouter} from 'vue-router';
import defaultLogo from "@/assets/images/default-logo.png";
import defaultAvatar from "@/assets/images/default-avatar.jpg";
import {$localStorage} from "@/utils/application-storage.js";
import {ArrowRight, Setting, UserFilled} from "@element-plus/icons-vue";
import $apiService from "@/axios/api.js";

/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();

const tenantInfo = ref({
  id: "",
  logo: defaultLogo,
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  avatarUrl: defaultAvatar,
  realName: ''
})
const applicationList = ref([])

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
  queryApplicationList()
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const queryApplicationList = () => {
  const data = {
    params: {
      tenantId: tenantInfo.value.id,
      // applicationSnapshot: { applicationType: 'Custom' },
    },
    ignoreFieldList: ['creationOperatorSnapshot', 'updateOperatorSnapshot', 'applicationSnapshot', 'roleAuthorityUiSnapshot'],
    sort: ['seq,desc'],
    all: true,
  }
  $apiService.getApplicationList(data).then((res) => {
    applicationList.value = res.data.data.content
  })
}

const onCreate = () => {
}
const routeTo = ({id, name}) => {
  $router.push({
    name: 'ApplicationAdminDetailTestPage',
    params: {
      tenantCode: tenantInfo.value.tenantCode,
      applicationId: id
    }
  })
  $localStorage.setCurApplicationInfo({id, name})
}
const onCommand = () => {
}
</script>

<style scoped>
.workspace-logo {
  background-image: url('@/assets/images/background-2.png');
  background-size: cover;
  background-position: center;
}

.application .app-dropdown {
  display: none;
}

.application:hover .app-dropdown {
  display: block;
}
</style>
